import {
  Collapse,
  Button,
  Descriptions,
  Row,
  Col,
  Tree,
  Pagination
} from "antd";
import { DownOutlined } from "@ant-design/icons";
import { connect } from "dva";
import React from "react";
import styles from "./detail.less";
import icon from "../../assets/images/amazon-chime.png";

const { Panel } = Collapse;
const menuList = [
  {
    title: "杰出研究",
    id: 1,
    children: [
      {
        id: 101,
        title: "癌细胞研究"
      },
      {
        id: 102,
        title: "癌细胞的病变"
      },
      {
        id: 103,
        title: "诱发原因"
      },
      {
        id: 104,
        title: "来源"
      },
      {
        id: 105,
        title: "治愈案例"
      }
    ]
  },
  {
    title: "医学奇迹",
    id: 2,
    children: [
      {
        id: 201,
        title: "基础医学"
      },
      {
        id: 202,
        title: "临床医学"
      },
      {
        id: 203,
        title: "预防医学与卫生学"
      },
      {
        id: 204,
        title: "军事医学与特种医学"
      },
      {
        id: 205,
        title: "药学"
      },
      {
        id: 206,
        title: "中医学与中药"
      }
    ]
  },
  {
    title: "中医药材",
    id: 3,
    children: [
      {
        id: 301,
        title: "常见药材介绍"
      },
      {
        id: 302,
        title: "珍惜药材购买须知"
      },
      {
        id: 303,
        title: "保养品"
      }
    ]
  }
];

@connect(({global})=>({userId: global.userId}))
class HelpDOCDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      menuList: [],
      articleList: {},
      treeData: [],
      id: this.props.match.params.id,
      firstTitle: ""
    };
  }

  componentDidMount = () => {
    this.getHelp();
    this.getHelpInfo();
  };
  getHelp = () => {
    this.props
      .dispatch({
        type: "global/getHelp",
        payload: {}
      })
      .then(res => {
        this.handleTreeData(res.data);
        this.setState({ menuList: res.data });
      });
  };
  getHelpInfo = () => {
    let { id } = this.state;
    this.props
      .dispatch({
        type: "global/getHelpInfo",
        payload: {
          id: id
        }
      })
      .then(res => {
        console.log("getHelpInfo", res.data);
        this.setState({
          articleList: res.data,
          firstTitle: res.data.title.charAt(0)
        });
        console.log(this.state.articleList);
      });
  };
  //树
  handleTreeData = arr => {
    arr.map(item => {
      item.title = item.catalog;
      item.key = item.id;
      if (item.children.length > 0) {
        item.title = item.catalog;
        item.key = item.id;

        this.handleTreeData(item.children);
      }
    });
    return arr;
  };
  // handleToSearch = (e, selectedKeys) => {
  //   console.log("e", e);
  //   console.log("selectedKeys", selectedKeys);
  //   console.log(selectedKeys.node.id);
  //   this.setState(
  //     {
  //       id: selectedKeys.node.id
  //     },
  //     () => {
  //       this.getHelpInfo();
  //     }
  //   );
  // };
  render() {
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>帮助</p>
            <p>Help</p>
          </div>
        </div>
        <div className={styles.detailBox}>
          <div className={styles.fl} style={{ width: "100%" }}>
            <div className={styles.detailHead}>
              <div className={styles.clearfix}>
                <div style={{ width: "100%" }}>
                  <div className={styles.fl}>
                    <div
                      className={styles.descriptionsIcon}
                      style={{
                        width: "68px",
                        height: "68px",
                        fontSize: "72px",
                        marginTop: "-10px",
                        marginLeft: "30px"
                      }}
                    >
                      {this.state.firstTitle}
                    </div>
                  </div>
                  <div className={styles.fl}>
                    <div style={{ float: "left" }}>
                      <p
                        className={styles.bigTitle}
                        style={{ marginLeft: "2px", marginTop: "12px" }}
                      >
                        {this.state.articleList.title}
                      </p>
                      {/* <span className={styles.littleTitle}>STAR-Network</span> */}
                      {/* <span style={{ float: "right", marginRight: 10 }}>
                        <PushpinFilled />
                      </span>
                      <span style={{ float: "right", marginRight: 10 }}>
                        <EyeOutlined />
                      </span>
                      <span style={{ float: "right", marginRight: 10 }}>
                        <CloudServerOutlined />
                      </span>
                      <span style={{ float: "right", marginRight: 10 }}>
                        <CloudDownloadOutlined />
                      </span> */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* <div className={styles.fl}>
            <div className={styles.leftContent}>
              <Tree
                treeData={this.state.menuList}
                style={{
                  fontSize: "18px",
                  fontWeight: 400,
                  lineHeight: "25px",
                  color: "#00b5c1",
                  marginBottom: "15px"
                }}
                switcherIcon={<DownOutlined />}
                expandAction="click"
                onSelect={(e, selectedKeys) =>
                  this.handleToSearch(e, selectedKeys)
                }
              ></Tree>
            </div>
          </div> */}
          <div className={styles.detailBody} style={{width:"100%"}}>
            <div className={styles.clearfix}>
              <div className={styles.fr}>
                <div className={styles.detailBodyLeft}>
                  <Descriptions column={2}>
                    <Descriptions.Item label="时间" span={2}>
                      {this.state.articleList.createTime}
                    </Descriptions.Item>
                    <Descriptions.Item label="上传人" span={2}>
                      {this.state.articleList.createUser}
                    </Descriptions.Item>
                    {/* <Descriptions.Item label="查阅量" span={2}>
                      5432
                    </Descriptions.Item> */}
                    <Descriptions.Item label="修改时间" span={2}>
                      {this.state.articleList.modifyTime}
                    </Descriptions.Item>
                    <Descriptions.Item label="修改人" span={2}>
                      {this.state.articleList.modifyUser}
                    </Descriptions.Item>
                    {/* <Descriptions.Item label="数据来源" span={2}>
                      中国科学院空间科学数据中心
                    </Descriptions.Item> */}
                    <Descriptions.Item label="正文" span={2}>
                      {this.state.articleList.content}
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default HelpDOCDetail;
